<template>
  <div class="main-container">
    <div class="title">
      <h2>记录遴选</h2>
      <p>请从您的成长记录中选择最能代表您综合素质发展的内容</p>
    </div>
    <Tabs :tabList="tabList" @tab-click="handleTabClick" />
    <cardModule :cardQuery="item" v-for="(item, index) in tabList" :key="index"
      v-show="activeTab === '全部记录' || activeTab === item.label" @update:selectedItems="handleSelectedItemsUpdate" />

    <el-card class="box-card box-card-ok" shadow="hover">
      <template #header>
        <div class="card-header">
          <h3>已选{{ tabSelectedItems.length }}个记录预览</h3>
        </div>
      </template>
      <div v-if="tabSelectedItems.length === 0" class="no-selected">
        暂无选中的记录
      </div>
      <div v-else v-for="o in tabSelectedItems" :key="o" class="text item">
        <div>
          <h4>{{ o.INDICATOR_NAME }}</h4>
          <p>
            <span>{{ getGscl(o.EVALRECORD, '荣誉名称') }}</span>
            <span>·</span>
            <span>{{ o.TJRQ }}</span>
          </p>
        </div>
        <el-icon @click="handleSelectedItemsUpdate(o, 'remove')"><close-bold /></el-icon>
      </div>
    </el-card>

    <div class="submit">
      <el-button size="large" type="default" @click="resetSelect">重置选择</el-button>
      <el-button size="large" type="primary" @click="saveSelection">保存遴选结果</el-button>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import Tabs from '@/components/tabs.vue'
import cardModule from '@/components/card-module.vue'
import { useStore } from '@/store';
const store = useStore();
const recordStore = store.record;


let activeTab = ref('全部记录');
let tabList = computed(() => {
  // 提取所有PARENT_NAME并去重
  const uniqueParentNames = [...new Set(recordStore.records.map(item => item.PARENT_NAME))];
  let arr = uniqueParentNames.map(name => ({
    label: name,  // 使用去重后的名称作为label
    type: 'button',  // 固定类型为button
    title: name,
    total: recordStore.records.filter(item => item.PARENT_NAME === name).length,
    completed: recordStore.records.filter(item => item.PARENT_NAME === name && item.flag === 1).length,
    list: recordStore.records.filter(item => item.PARENT_NAME === name),
    flag: 0,
  }));
  return arr;
});

let handleTabClick = (tab) => {
  activeTab.value = tab;
}
// 存储每个标签页选中的项目
let tabSelectedItems = ref([]);

// 重置
let resetSelect = () => {
  // 重置所有项目的选中状态
  tabList.value.forEach(tab => {
    tab.list.forEach(item => {
      item.flag = 0;
    });
  });
  // 清空选中列表
  tabSelectedItems.value = [];
}

// 添加计算属性，判断当前选择的学期是否可操作
let isCurrentSemesterOperable = computed(() => {
  // 从store中获取当前选择的学期id
  const semesterId = store.record.semesterid;
  return store.settings.isSemesterOperable(semesterId)
})

// 保存遴选结果
let saveSelection = () => {

  if (!isCurrentSemesterOperable.value) {
    ElMessage({
      message: '当前学期不可操作，不可保存',
      type: 'warning',
    });
    return;
  }


  // 提取选中项目的RECORD_ID
  const selectedIds = tabSelectedItems.value.map(item => item.RECORD_ID).join(',');
  // 发起保存的请求 
  recordStore.saveSelectedRecordsData(selectedIds);
};

// 处理子组件发送的选中项目更新
const handleSelectedItemsUpdate = (selectedItems, type) => {
  if (type === 'add') {
    tabSelectedItems.value.push(selectedItems);
  } else {
    // 从选中列表移除
    const index = tabSelectedItems.value.findIndex(selected => selected.RECORD_ID == selectedItems.RECORD_ID);
    if (index > -1) {
      tabSelectedItems.value.splice(index, 1);
    }
  }
};


onMounted(() => {
  
})

let getGscl = (val, text) => {
  switch (text) {
    case "荣誉名称":
      return JSON.parse(val).荣誉名称
    case "奖励时间":
      return JSON.parse(val).奖励时间
    case "奖励单位":
      return JSON.parse(val).奖励单位
    case "奖励级别":
      return JSON.parse(val).奖励级别
    case "奖励原因":
      return JSON.parse(val).奖励原因
  }
}



</script>

<style scoped lang="scss">
.main-container {
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
  padding: 0;

  .box-card-ok {
    border-radius: 10px;

    ::v-deep .el-card__body {
      height: 240px;
      overflow-y: auto;
      padding: 0 20px;
    }

    .no-selected {
      text-align: center;
      padding: 40px 0;
      color: #909399;
    }

    .text {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      background-color: #f9fafb;
      border-radius: 5px;
      margin: 10px 0;

      h4 {
        margin: 8px 0;
        font-size: 14px;
        font-weight: 400;
        color: #303133;
      }

      p {
        font-size: 12px;
        color: #909399;

        span {
          margin-right: 5px;
        }
      }
    }
  }

  .submit {
    margin: 20px 0;
    text-align: right;
  }

  .title {
    max-width: 1420px;
    margin: 0 auto;

    h2 {
      font-size: 24px;
      font-weight: 800;
      margin: 10px 0;
    }
  }
}
</style>
